﻿<div>

    <h2>JavaScript 代码：</h2>
    <textarea name="dp-syntaxhighlighter" class="brush: js; highlight: []">

            $(function () {
                var t = $("#t1").datagrid({
                    title: 'test datagrid',
                    width: 1200,
                    height: 400,
                    method: "get",
                    url: "datagrid/datagrid-data.json",
                    idField: 'ID',
                    remoteSort: false,
                    frozenColumns: [[
                        { field: 'ck', checkbox: true },
                        { field: 'ID', title: 'ID', width: 80, sortable: true }
                    ]],
                    columns: [[
                        { field: 'Code', title: '编号(Code)', width: 120, editor: "text" },
                        { field: 'Name', title: '名称(Name)', width: 140, editor: "text" },
                        { field: 'Age', title: '年龄(Age)', width: 120, editor: "text" },
                        { field: 'Height', title: '身高(Height)', width: 140, editor: "text" },
                        { field: 'Weight', title: '体重(Weight)', width: 140, editor: "text" },
                        { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180 },
                        { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
                    ]],
                    rowContextMenu: [
                        { text: "编辑", iconCls: "icon-edit", handler: function (e, index) { t.datagrid("beginEdit", index); } }
                    ],
                    pagination: true,
                    //enableHeaderClickMenu: false,
                    //enableHeaderContextMenu: false,
                    //enableRowContextMenu: false,
                    autoEditing: true,          //该属性启用双击行时自定开启该行的编辑状态
                    extEditing: true,           //该属性启用行编辑状态的 ExtEditing 风格效果，该属性默认为 true。
                    singleEditing: false        //该属性为 false 时禁用 datagrid 的只允许单行编辑效果，也就是允许多行同时编辑
                });


                var i = 20,
                    getRow = function () {
                        return { ID: ++i, Code: i, Name: "TestName" + i, Age: 18, Height: 159, Weight: 49, CreateDate: "2008-02-11" };
                    };
                $("#Button1").click(function () {
                    t.datagrid("appendRow", getRow());
                });

                $("#Button2").click(function () {
                    t.datagrid("insertRow", { index: 1, row: getRow() });
                });
            });

    </textarea>
    <h2>HTML 代码：</h2>
    <textarea name="dp-syntaxhighlighter" class="brush: html; highlight: []">

        <input id="Button1" type="button" value="appendRow测试数据" />
        <input id="Button2" type="button" value="insertRow测试数据" />
        <hr />
        <table id="t1"></table>

    </textarea>


</div>